<template>
  <div class="tenants">
    <el-input v-model.trim="keyword"
              maxlength="20"
              show-word-limit
              clearable
              autocomplete
              label="公司名称"
              placeholder="请输入内容"
              @keyup.enter.native="handleKeywordChange">
    </el-input>
    <!-- <el-button @click="search(keyword)" :disabled='disabledSearch'>搜  索</el-button> -->
    <el-table :data="tenantList"
              tooltip-effect="dark"
              style="width: 100%"
              @selection-change="handleSelectionChange">
      <el-table-column type="selection"
                       width="55"> </el-table-column>
      <el-table-column label="日期"
                       width="120">
        <template slot-scope="scope">{{ scope.row.date }}</template>
      </el-table-column>
      <el-table-column prop="name"
                       label="姓名"
                       width="120"> </el-table-column>
      <el-table-column prop="address"
                       label="地址"
                       show-overflow-tooltip>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
import { mapState, mapActions } from "vuex";
export default {
  name: "Tenants",
  props: {
    tableData: {
      type: Array,
      default: () => []
    }
  },
  data () {
    return {
      keyword: ""
    };
  },
  computed: {
    ...mapState({
      tenantList: (state) => state.tenant.tenantList
    }),
    disabledSearch () {
      return !this.keyword || this.keyword.length <= 2;
    }
  },
  created () {
    this.searchTenant();
  },
  methods: {
    ...mapActions({
      searchTenant: "tenant/search"
    }),
    handleKeywordChange () {
      this.searchTenant(this.keyword);
    },
    handleSelectionChange () { }
  }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped></style>
